/*
 * @ddescription: 小b后台商品订单列表/自营、淘客订单列表
 * @Author: ice
 * @Date: 2021-04-09
 * @Last Modified by: --
 * @Last Modified time: --
 */
<template>
    <div class="zdOrderList">
        <div
            class="content"
        >
            <el-tabs
                v-model="formData.status"
                @tab-click="getTableData(1)"
            >
                <el-tab-pane
                    label="全部"
                    name="99"
                />
                <el-tab-pane
                    label="待付款"
                    name="0"
                />
                <el-tab-pane
                    label="团购中"
                    name="98"
                />
                <el-tab-pane
                    label="待发货"
                    name="2"
                />
                <el-tab-pane
                    label="待收货"
                    name="3"
                />
                <el-tab-pane
                    label="已完成"
                    name="4"
                />
                <el-tab-pane
                    label="已关闭"
                    name="-1"
                />
            </el-tabs>
            <div class="contentmain">
                <!-- header -->
                <div class="header-nav">
                    <div class="header-left">
                        <div class="header-new-box">
                            <p class="header-new-box-title">
                                订单编号
                            </p>
                            <el-input
                                v-model="formData.order_no"
                                placeholder="请输入订单编号"
                                size="small"
                                clearable
                                suffix-icon="el-icon-search"
                                @change="getTableData(1)"
                                @keyup.native.enter="getTableData(1)"
                            />
                        </div>
                        <div class="header-new-box">
                            <p class="header-new-box-title">
                                商品名称
                            </p>
                            <el-input
                                v-model="formData.keyword"
                                placeholder="请输入商品名称"
                                size="small"
                                clearable
                                suffix-icon="el-icon-search"
                                @change="getTableData(1)"
                                @keyup.native.enter="getTableData(1)"
                            />
                        </div>
                        <div
                            class="header-new-box"
                            v-if="showFilter"
                        >
                            <p class="header-new-box-title">
                                用户昵称
                            </p>
                            <el-input
                                v-model="formData.phone"
                                placeholder="请输入用户昵称"
                                size="small"
                                clearable
                                suffix-icon="el-icon-search"
                                @change="getTableData(1)"
                                @keyup.native.enter="getTableData(1)"
                            />
                        </div>
                        <div
                            class="header-new-box"
                            v-if="showFilter"
                        >
                            <p class="header-new-box-title">
                                订单类型
                            </p>
                            <el-select
                                v-model="formData.order_category"
                                clearable
                                filterable
                                placeholder="请选择"
                                size="small"
                                @change="getTableData(1)"
                            >
                                <el-option
                                    v-for="item in categoryList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                        <div
                            class="header-new-box"
                            v-if="showFilter"
                        >
                            <p class="header-new-box-title">
                                售后服务
                            </p>
                            <el-select
                                v-model="formData.cancel_apply_type"
                                clearable
                                filterable
                                placeholder="请选择"
                                size="small"
                                @change="getTableData(1)"
                            >
                                <el-option
                                    v-for="item in applyList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                        <div
                            class="header-new-box"
                            v-if="showFilter"
                        >
                            <p class="header-new-box-title">
                                下单时间
                            </p>
                            <el-date-picker
                                v-model="order_time"
                                type="datetimerange"
                                :picker-options="pickerOptions()"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                align="right"
                                size="small"
                                @change="getTableData(1)"
                            />
                        </div>
                        <div
                            class="header-new-box"
                            v-if="showFilter"
                        >
                            <el-button
                                size="small"
                                type="primary"
                                @click="getTableData(1)"
                            >
                                搜索
                            </el-button>
                        </div>

                        <!-- 引导流程 -->
                        <div :style="{display: 'flex', alignItems: 'center', position: dialogGuideNext ? 'absolte' : '', zIndex: dialogGuideNext ? '9999' : '', boxSizing: 'border-box', borderRadius: dialogGuideNext ? '10px' : '', padding: dialogGuideNext ? '20px' : '', background: dialogGuideNext ? '#fff' : '', pointerEvents: dialogGuideNext ? 'none' : ''}">
                            <div
                                class="header-new-box"
                                :style="{marginBottom: dialogGuideNext ? 0 : '24px'}"
                            >
                                <el-button
                                    size="small"
                                    type="primary"
                                    @click="fnBatchGoods()"
                                >
                                    批量发货
                                </el-button>
                            </div>
                            <div
                                class="header-new-box"
                                :style="{marginBottom: dialogGuideNext ? '0' : '24px', marginRight: dialogGuideNext ? '0' : '32px'}"
                            >
                                <el-button
                                    size="small"
                                    type="default"
                                    :style="{border: '1px #20A0FF solid', color: '#20A0FF'}"
                                    @click="fnBatchEcportData()"
                                >
                                    批量导出
                                    <el-popover
                                        placement="top"
                                        trigger="hover"
                                        :width="260"
                                        content="可从左侧的“订单状态”中选择待发货，即可一键导出待发货订单"
                                        style="letter-spacing: 0"
                                        popper-class="el-popover-hover"
                                    >
                                        <i
                                            class="iconfont icon-question1"
                                            slot="reference"
                                            style="position: relative; z-index:999;font-size: 12px;color:#20A0FF"
                                        />
                                    </el-popover>
                                </el-button>
                            </div>
                        </div>
                        <div
                            class="dialogGuide-wrap-order"
                            :style="{position: 'absolute', zIndex: '99999', top: '199px', right: '201px'}"
                            v-if="dialogGuideNext"
                        >
                            <p class="dialogGuide-wrap-text">
                                点击“批量导出”，可以批量导出待发货订单并再次导入以批量发货
                            </p>
                            <p
                                class="dialogGuide-wrap-next"
                                @click="()=>{
                                    this.$store.commit('bood/SET_STEP', 4);
                                    this.$router.push({
                                        name: 'finance',
                                        query: {
                                            guide_step: 4
                                        }
                                    })
                                }"
                            >
                                下一步
                            </p>
                        </div>

                        <!-- 展开折叠 -->
                        <div class="header-new-box">
                            <el-button
                                size="small"
                                type="default"
                                @click="showFilter = !showFilter"
                            >
                                {{ showFilter ? '折叠' : '展开' }}
                            </el-button>
                        </div>
                    </div>
                </div>
                <!-- /header -->

                <!-- table -->
                <div class="tableWrap">
                    <order-self
                        ref="orderSelf"
                        :table="tableData"
                        @update="changeTableData"
                    />
                </div>

                <!-- /分页 -->
                <div class="pagination-wrapper clearfixNew">
                    <el-pagination
                        background
                        :current-page.sync="page.now_page"
                        :page-size="page.page_size"
                        layout="total, prev, pager, next, jumper"
                        :total="page.total_count"
                        @current-change="getTableData"
                    />
                </div>
            </div>
        </div>

        <!-- 自营/批量发货弹窗 -->
        <logistice-goods
            ref="logisticeGoods"
            @update="changeTableData"
        />

        <!-- 引导 -->
        <div
            class="dialogGuide"
            v-if="dialogGuide"
            @click="fnNextStep()"
        >
            <div
                class="dialogGuide-wrap"
                v-if="!dialogGuideNext"
            >
                <p class="dialogGuide-wrap-text">
                    点击“订单列表”，在这里可以查看所有的订单
                </p>
                <p
                    class="dialogGuide-wrap-next"
                    @click.prevent.stop="()=>{
                        dialogGuideNext = true;
                        $store.commit('bood/SET_STEP', 0);
                    }"
                >
                    下一步
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import orderSelf from '@/components/manage/market/order-self.vue';
import logisticeGoods from '@/components/manage/market/logistice-goods.vue';


const FILTER = {
    status: '99',//99:全部,0:待支付,98:团购中,2:待发货,3:待收货,4:订单完成,-1:订单取消
    order_no: '',//订单编号
    keyword: '',//商品名称
    phone: '',//手机号
    // payment_type: 99,//付款方式 99: 全部 1:支付宝 2:微信 3:钱包
    order_category: 99,//订单类型  99:全部,0:一般订单,1:抢购订单,2:核销订单,3:折扣订单,5:0元购,6:砍价,7:团购
    cancel_apply_type: 99,//售后服务 99: 全部 1:仅退款 2:退货退款
};

const FILTER_LIST = {
    categoryList: [{value: 99, label: '全部'},{value: 0, label: '一般订单'},{value: 1, label: '抢购订单'},{value: 3, label: '折扣订单'},{value: 5, label: '0元购'},{value: 6, label: '砍价订单'},{value: 7, label: '团购订单'}],
    applyList: [{value: 99, label: '全部'},{value: 1, label: '仅退款'},{value: 2, label: '退货退款'}],
};

const GUIDE = {
    dialogGuideNext: false,//引导2
    dialogGuide: false,//引导1
};

export default {
    components: {
        orderSelf,
        logisticeGoods
    },
    data () {
        return {
            showFilter: true,
            formData: {
                ...FILTER
            },
            order_time: [],//下单时间筛选
            ...FILTER_LIST,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            ...GUIDE,
            tableData: []
        };
    },
    watch: {},
    filters: {},
    mounted () {
        this.getRouter();
        this.init();
    },
    methods: {
        /**
         * @description 处理其它页面跳转查询订单
         */
        getRouter () {
            const query = this.$route.query;

            this.$set(this.formData, 'order_no', query.order_no ? query.order_no : this.formData.order_no);
            this.$set(this.formData, 'status', query.status ? query.status : this.formData.status);
            this.$set(this.formData, 'order_category', query.order_category ? query.order_category : this.formData.order_category);
            this.$set(this.formData, 'cancel_apply_type', query.cancel_apply_type ? query.cancel_apply_type : this.formData.cancel_apply_type);
            this.$set(this.formData, 'keyword', query.goods_title ? query.goods_title : this.formData.keyword);
            this.$set(this.formData, 'phone', query.student_true_name ? query.student_true_name : this.formData.phone);
        },

        /**
         * @description 初始化页面数据
         */
        init () {
            if(this.$route.query.guide_step == 3) {
                this.$store.commit('bood/SET_STEP', 3);
                this.dialogGuide = true;
            }
            this.getTableData(1);
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/ShopGoodsOrder/getList', {
                page_id: page || this.page.now_page,
                order_no: this.formData.order_no,
                status: this.formData.status,
                order_category: this.formData.order_category,
                cancel_apply_type: this.formData.cancel_apply_type,
                goods_title: this.formData.keyword,
                student_true_name: this.formData.phone,
                create_start_time: this.order_time === null ? '' : (this.order_time.length == 0 ? '' : parseInt(new Date(this.order_time[0]) / 1000)),
                create_end_time: this.order_time === null ? '' : (this.order_time.length == 0 ? '' : parseInt(new Date(this.order_time[1]) / 1000)),
            }, resp=>{
                console.log('hahahah', resp);
                if (resp.code == 1) {
                    this.tableData = this.tableDataMac(resp.data.list);
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 数据加工
         */
        tableDataMac (tableData) {
            if(tableData.length > 0) {
                tableData.forEach(element => {
                    let buy_student_list = element.buy_student_list;
                    let index = 0;

                    if(buy_student_list.length) {
                        buy_student_list.forEach(el => {
                            const order_item_list = el.order_item_list;

                            if(order_item_list.length) {
                                order_item_list.forEach(e => {
                                    index ++;
                                });
                            }
                        });
                    }

                    element.length = index;
                });

                return tableData;
            } else {
                return [];
            }
        },

        /**
         * @description 切换订单状态
         */
        handleClick (event) {
            this.getTableData(1);
        },

        /**
         * @description 确认批量发货
         */
        fnBatchGoods () {
            this.$refs.logisticeGoods.show();
        },

        /**
         * @description 批量发货后触发列表更新
         */
        changeTableData () {
            this.getTableData();
        },

        /**
         * @description 批量导出数据
         */
        fnBatchEcportData () {
            this.$post('/stuhire_shop/ShopGoodsOrder/getExportListUrl', {
                order_no: this.formData.order_no,
                status: this.formData.status,
                order_category: this.formData.order_category,
                cancel_apply_type: this.formData.cancel_apply_type,
                goods_title: this.formData.keyword,
                student_phone: this.formData.phone,
                create_start_time: this.order_time === null ? '' : (this.order_time.length == 0 ? '' : (parseInt(new Date(this.order_time[0]).getTime() / 1000))),
                create_end_time: this.order_time === null ? '' : (this.order_time.length == 0 ? '' : (parseInt(new Date(this.order_time[1]).getTime() / 1000))),
            }, resp => {
                if (resp.code == 1) {
                    window.open(resp.data.export_url);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 引导流程
         */
        fnNextStep(){
            if(this.dialogGuideNext){
                this.$store.commit('bood/SET_STEP', 4);
                this.$router.push({
                    name: 'finance',
                    query: {
                        guide_step: 4
                    }
                });
            }
        },

        /**
         * @description 时间处理
         */
        pickerOptions () {
            return {
                shortcuts : [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            };
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.zdOrderList {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .header-tab {
        background: #fff;
        padding: 24px 24px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .header-switch {
        width: 242px;
        height: 36px;
        background: #eaeaf2;
        border-radius: 18px;
        position: relative;
        margin-left: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        &-item {
            flex: 1;
            width: 84px;
            font-size: 14px;
            font-weight: 500;
            color: #666666;
            line-height: 36px;
            position: relative;
            text-align: center;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease-in-out;
            &.active {
                color: #20a0ff;
            }
        }
        &-slider {
            width: 113px;
            height: 28px;
            background: #FFFFFF;
            border-radius: 18px;
            position: absolute;
            left: 4px;
            top: 4px;
            transition: left 0.3s ease-in-out;
        }
    }
    .header {
        width: 100%;
        height: 84px;
        background: #ffffff;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
        color: #333333;
        font-size: 20px;
        .header-list {
            width: 242px;
            height: 36px;
            background: #EAEAF2;
            border-radius: 18px;
            margin-left: 10px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 4px;
            justify-content: space-between;
            .header-title {
                color: #666;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                width: 113px;
                height: 28px;
                text-align: center;
                line-height: 28px;
            }
            .header-active {
                width: 113px;
                height: 28px;
                background: #ffffff;
                border-radius: 18px;
                text-align: center;
                line-height: 28px;
                color: #20A0FF;
                font-weight: 500;
                font-size: 14px;
            }
        }
    }
    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        .contentTab {
            position: relative;
            .content-line {
                width: 100%;
                height: 1px;
                background: #E4E7ED;
                left: 0;
                bottom: 24px;
                position: absolute;
            }
        }
        .contentmain {
            box-sizing: border-box;
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }
        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0px;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .header-new-box {
                display: flex;
                margin-right: 32px;
                align-items: center;
                color: #333333;
                margin-bottom: 24px;
                white-space: nowrap;
                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                    color: #333333;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        // 表格
        .tableWrap {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;
        }
    }
    //引导
    .dialogGuide {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: rgba(0,0,0,.5);
        z-index: 999;
        &-wrap {
            width: 274px;
            height: 92px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 295px;
            left: 245px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 40px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
        &-menu{
            width: 190px;
            height: 56px;
            border-radius: 6px;
            background: #fff;
            position: absolute;
            left: 7px;
            top: 421px;
            &-text {
                width: 190px;
                height: 40px;
                margin-top: 8px;
                background:rgba(233,246,255,1);
                color: #20A0FF;
                font-size: 14px;
                line-height: 40px;
                padding-left: 52px;
                cursor: pointer;
            }
        }
        &-wrap-order {
            width: 274px;
            height: 92px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 100px;
            right: 156px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 40px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
                letter-spacing: 0;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
    }
}
</style>

<style lang="less">
.zdOrderList {
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
</style>